/* eslint-disable react/jsx-pascal-case */
import React from 'react'

const UseMemo = () => {
	const [count, setCount] = React.useState(0)

	const ChangeCount = () => {
		setCount(count + 1)
	}
	const total = () => {
		console.log('没有缓存的变量方法')
		return 2 * count
	}
	// 它仅会在某个依赖项改变时才重新计算 memoized 值
	const memoTotal = React.useMemo(() => {
		console.log('被缓存的变量方法')
		return 3 * count
	}, [count])
	return (
		<>
			<div className="nav2">
				<h4>11.使用useMemo优化性能</h4>
				<React.$vant.Button onClick={ChangeCount}>
					count变量改变 | {count}
				</React.$vant.Button>
				<h3>方法一 total: {total()}</h3>
				<h3>方法二 memo total(可以达到优化性能的目的): {memoTotal}</h3>
			</div>
		</>
	)
}
export default UseMemo